<template>
	<view class="container">
		<!-- 版本低时，自动更新弹窗 -->
		<updateWindow ref="updata" @cancelQuit="cancelQuit"></updateWindow>
		<!-- 版本低，取消自动更新后通告栏弹出 -->
		<uni-notice-bar show-icon scrollable v-if="noticeTextShow" :text="$t('homepage.versionUpdate')" @tap="update" />
		<!-- 首页头部 -->
		<view class="container_head">
			<view class="head">
				<view class="title">{{$store.state.loginData.deptName}}</view>
				<view class="imgs">
					<view v-show="handle_call" @click="gridClick({nav:'handle_call'})">
						<image src="../../static/assets/homepage/index/message.png" class="img"
							v-if="this.handleCallNum==0">
						</image>
						<image src="../../static/assets/homepage/index/message-tip.png" class="img" v-else>
						</image>
					</view>
					<image src="../../static/assets/homepage/index/scan.png" class="img"
						@click="$refs.showRight.open()"></image>
				</view>
			</view>
			<view class="name">
				<view><span class="name_text">{{$t('homepage.realname')}}</span>{{$store.state.loginData.realname}}
				</view>
				<view><span class="name_text">{{$t('homepage.idCard')}}</span>{{$store.state.loginData.idCard}}
				</view>
			</view>
		</view>
		<!-- 菜单抽屉 -->
		<!-- <uni-drawer ref="showRight" mode="right" mask-click @change="">
			<view class="container_drawer">
				<zy-cell :cellList="cellList" type="group" @clickHandler="" />
			</view>
		</uni-drawer> -->
		<view class="container_grid">
			<!-- 宫格 -->
			<uni-grid :column="4" :show-border="false" :square="false">
				<uni-grid-item v-for="(item ,index) in list.slice(0,7)" :index="index" :key="index">
					<view class="container_grid_box" @tap="gridClick(item)">
						<image :src="item.img" class="container_grid_box_img"></image>
						<view class="container_grid_box_text">{{item.text}}</view>
						<view v-if="item.badge>0" class="container_grid_box_badge">
							<uni-badge :text="item.badge" :type="item.type" />
						</view>
					</view>
				</uni-grid-item>
				<!-- 更多按钮 -->
				<uni-grid-item v-if="list.length>7">
					<view class="container_grid_box" @click="goAll">
						<image src="../../static/assets/homepage/index/more.png" class="container_grid_box_img"></image>
						<view class="container_grid_box_text">{{$t('homepage.more')}}</view>
					</view>
				</uni-grid-item>
			</uni-grid>
			<!-- 手持机自带红外扫描 -->
			<infraredCode></infraredCode>
		</view>
		<!-- 呼叫处理 -->
		<view class="container_salary" v-if="handle_call">
			<view class="title">
				<span class="title-span">{{$t('homepage.callDeal')}}</span>
				<span class="title-date">{{date}}</span>
			</view>
			<view class="content">
				<view class="content-list" @click="gridClick({nav:'handle_call',name:'unreceive'})">
					<image src="../../static/assets/homepage/index/receive.png" class="img"></image>
					<view class="text">
						<span>{{$t('homepage.CallDeal.unreceive')}}</span>
						<view class="data">
							{{unreceivedList}}<span class="unit">{{$t('public.piece')}}</span>
						</view>
					</view>
				</view>
				<view class="content-list" @click="gridClick({nav:'handle_call',name:'undeal'})">
					<image src="../../static/assets/homepage/index/deal.png" class="img"></image>
					<view class="text">
						<span>{{$t('homepage.CallDeal.undeal')}}</span>
						<view class="data">
							{{undealList}}<span class="unit">{{$t('public.piece')}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="container_salary" v-if="product_saraly">
			<view class="title charts-title">
				<span class="title-span" @click="gridClick({nav:'product_salary'})">{{$t('homepage.product_salary')}}</span>
				<span class="update-can-data" @click="updateCDFir">{{$t('homepage.update_charts')}}</span>
			</view>
			<canvas canvas-id="column" id="column" class="charts" @touchend="tap" />
		</view>
	</view>
</template>

<script>
	import {
		getAppMenu,
		queryQuestionList,
		getTodayYeild
	} from "@/api/homepage.js"
	import {
		logout
	} from "@/api/index.js"
	import {
		updateVersion
	} from '@/api/updateVersion.js'
	import baseUrl from '@/utils/getIp.js'
	import uCharts from '@/js_sdk/u-charts.js';
	import getDateTime from '@/common/getdateTime.js';
	import infraredCode from "@/components/infrared-code/index.vue";
	import updateWindow from '@/uni_modules/e-updateModel/components/e-updateModel/e-updateModel.vue'
	var uChartsInstance = {};
	export default {
		components: {
			infraredCode,
			updateWindow
		},
		data() {
			return {
				noticeTextShow: false,
				currentVersion: uni.getStorageSync('version'),
				list: [],
				date: '',
				product_saraly: false, //产量工资
				outputWageFormData: {},
				handle_call: false, //呼叫处理
				unreceivedList: '',
				undealList: '',
				handleCallNum: "",
				cWidth: "",
				cHeight: "",
				procedureName: "",
			}
		},
		onShow() {
			let _this = this
			_this.getAppMenuFct()
			//首页监听PDA扫码数据
			uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器  
			uni.$on('scancodedate', function(data) {})
			_this.update() //版本更新2
			_this.getProceData()
		},
		onHide() {
			// 清除定时器
			clearInterval(this.getAppMenuFct())
		},
		onLoad() {
			let _this = this
			// 监听呼叫机修,刷新菜单宫格数据
			uni.$on('onCallMessage', function(res) {
				_this.getAppMenuFct()
			})
			//获取当前日期
			_this.date = getDateTime.dateTimeStr('y/m/d'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改r
			_this.getOutWageData() //获取产量工资数据
		},
		onUnload() {
			// 移除监听事件      
			uni.$off('onCallMessage')
		},
		onReady() {
			//这里的 750 对应 css .charts 的 width
			this.cWidth = uni.upx2px(650);
			//这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(500);
		},
		methods: {
			getProceData() {
				this.procedureName = ""
				let arr = uni.getStorageSync("procedureData")
				if (arr !== "") {
					arr.forEach((item, index) => {
						if (item.switch) {
							this.procedureName = item.procedureName
						}
					})
				}
			},
			//获取消息抽离
			getMessage(callback) {
				this.socketTask.onMessage((res) => {
					return callback(res)
				})
			},
			//版本低时，自动弹出弹框更新
			update: function() {
				this.$refs.updata.updateVersion()
			},
			//取消更新，滚动通知弹出
			cancelQuit() {
				this.noticeTextShow = true
			},
			//获取app权限
			getAppMenuFct() {
				this.list = []
				getAppMenu().then((res) => {
					console.log(res)
					if (res.fabric_report) {
						let arr = {
							nav: 'fabric_report',
							img: require('../../static/assets/homepage/index/fabric_report.png'),
							text: this.$t('homepage.fabric_report'),
						}
						this.list.push(arr)
					}
					if (res.product_monitor) {
						let arr = {
							nav: 'product_monitor',
							img: require('../../static/assets/homepage/index/product_monitor.png'),
							text: this.$t('homepage.product_monitor'),
						}
						this.list.push(arr)
					}
					if (res.product_pick) {
						let arr = {
							nav: 'product_pick',
							img: require('../../static/assets/homepage/index/product_pick.png'),
							text: this.$t('homepage.product_pick'),
						}
						this.list.push(arr)
					}
					if (res.basic_machine) {
						let arr = {
							nav: 'basic_machine',
							img: require('../../static/assets/homepage/index/basic_machine.png'),
							text: this.$t('homepage.basic_machine'),
						}
						this.list.push(arr)
					}
					if (res.warehouse_manage) {
						let arr = {
							nav: 'warehouse_manage',
							img: require('../../static/assets/homepage/index/warehouse_manage.png'),
							text: this.$t('homepage.warehouse_manage'),
						}
						this.list.push(arr)
					}
					if (res.machine_part) {
						let arr = {
							nav: 'machine_part',
							img: require('../../static/assets/homepage/index/machine_part.png'),
							text: this.$t('homepage.machine_part'),
						}
						this.list.push(arr)
					}
					if (res.call_machine) {
						let arr = {
							nav: 'call_machine',
							img: require('../../static/assets/homepage/index/call_machine.png'),
							text: this.$t('homepage.call_machine'),
						}
						this.list.push(arr)
					}
					if (res.handle_call) {
						queryQuestionList({
							billStatus: 0,
						}).then((res) => {
							this.unreceivedList = res.data.length
						})
						queryQuestionList({
							billStatus: 1,
						}).then((res) => {
							this.undealList = res.data.length
						})
						setTimeout(() => {
							this.handleCallNum = Number(this.unreceivedList) + Number(this.undealList)
							let arr = {
								nav: 'handle_call',
								img: require('../../static/assets/homepage/index/handle_call.png'),
								text: this.$t('homepage.handle_call'),
								badge: this.handleCallNum
							}
							this.list.push(arr)
							this.handle_call = true
						}, 300)
					}
					if (res.product_report) {
						let arr = {
							nav: 'product_report',
							img: require('../../static/assets/homepage/index/product_report.png'),
							text: this.$t('homepage.product_report'),
						}
						
						let arrSec = {
							nav: 'product_report_nostrict',
							img: require('../../static/assets/homepage/index/product_report.png'),
							text: this.$t('homepage.product_report_nostrict'),
						}
						
						this.list.push(arr)
						this.list.push(arrSec)
					}
					if (res.package_manage) {
						let arr = {
							nav: 'package_manage',
							img: require('../../static/assets/homepage/index/package_manage.png'),
							text: this.$t('homepage.package_manage'),
						}
						this.list.push(arr)
					}
					if (res.product_saraly) {
						let arr = {
							nav: 'product_salary',
							img: require('../../static/assets/homepage/index/product_saraly.png'),
							text: this.$t('homepage.product_salary'),
						}
						this.list.push(arr)
						this.product_saraly = true
					}
					if (res.cutting_market) {
						let arr = {
							nav: 'cutting_market',
							img: require('../../static/assets/homepage/index/cutting_market.png'),
							text: this.$t('homepage.cutting_market'),
						}
						this.list.push(arr)
					}
					if (res.quality_control) {
						let arr = {
							nav: 'quality_control',
							img: require('../../static/assets/homepage/index/quality_control.png'),
							text: this.$t('homepage.quality_control'),
						}
						this.list.push(arr)
					}
					if (res.process_query) {
						let arr = {
							nav: 'process_query',
							img: require('../../static/assets/homepage/index/process_query.png'),
							text: this.$t('homepage.process_query'),
						}
						this.list.push(arr)
					}
					// if (res.cutting_market) {
					// 	let arr = {
					// 		nav: 'example',
					// 		img: require('../../static/assets/homepage/index/process_query.png'),
					// 		text: "示例",
					// 	}
					// 	this.list.push(arr)
					// }
					// if (res.cutting_market) {
					// let arr = {
					// 	nav: 'report',
					// 	img: require('../../static/assets/homepage/index/process_query.png'),
					// 	text: "数据报表",
					// }
					// this.list.push(arr)
					// }
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
				});
			},
			gridClick(item) {
				if (item.nav == 'fabric_report') {
					uni.navigateTo({
						url: "./FabricReport/index"
					})
				}
				if (item.nav == 'product_monitor') {
					uni.navigateTo({
						url: "./ProductionMonitor/index"
					})
				}
				if (item.nav == 'product_pick') {
					uni.navigateTo({
						url: "./ProductionPick/index"
					})
				}
				if (item.nav == 'basic_machine') {
					uni.navigateTo({
						url: "./Machine/index"
					})
				}
				if (item.nav == 'warehouse_manage') {
					uni.navigateTo({
						url: "./WarehouseManage/index"
					})
				}
				if (item.nav == 'machine_part') {
					uni.navigateTo({
						url: "./AccessoryManagement/index"
					})
				}
				if (item.nav == 'call_machine') {
					uni.navigateTo({
						url: "./TerminalCall/index"
					})
				}
				if (item.nav == 'handle_call') {
					uni.navigateTo({
						url: "./CallDeal/index?data=" + item.name
					})
				}
				if (item.nav == 'product_report') {
					if (this.procedureName) {
						uni.navigateTo({
							url: "./WorkReport/index"
						})
					} else {
						uni.showToast({
							title: this.$t('homepage.procNull'),
							icon: "none",
							duration: 3000
						})
					}
				}
				if (item.nav == 'product_report_nostrict') {
					if (this.procedureName) {
						uni.navigateTo({
							url: "./WorkReportNostrict/index"
						})
					} else {
						uni.showToast({
							title: this.$t('homepage.procNull'),
							icon: "none",
							duration: 3000
						})
					}
				}
				if (item.nav == 'package_manage') {
					uni.navigateTo({
						url: "./Package/index"
					})
				}
				if (item.nav == 'product_salary') {
					uni.navigateTo({
						url: `./OutputWage/index?data=${encodeURIComponent(JSON.stringify(this.outputWageFormData))}&date=${encodeURIComponent(JSON.stringify(this.date))}`
					})
				}
				if (item.nav == 'cutting_market') {
					uni.navigateTo({
						url: "./CutMarket/index"
					})
				}
				if (item.nav == 'quality_control') {
					uni.navigateTo({
						url: "./QualityControl/index"
					})
				}
				if (item.nav == 'process_query') {
					uni.navigateTo({
						url: "./ProcessQuery/index"
					})
				}
				if (item.nav == 'printer') {
					uni.navigateTo({
						url: "./Printer/index"
					})
				}
				if (item.nav == 'example') {
					uni.navigateTo({
						url: "./Example/index"
					})
				}
				if (item.nav == 'report') {
					uni.navigateTo({
						url: "./Report/index"
					})
				}
			},
			// 跳转全部页面
			goAll() {
				uni.navigateTo({
					url: './allIndex?data=' + JSON.stringify(this.list)
				});
			},
			// 产量工资表单数据
			getOutWageData() {
				getTodayYeild().then((res) => {
					this.outputWageFormData = res.data
					this.$nextTick(() => {
						this.getServerData(1);
					})
				})
			},
			getServerData(type) {
				setTimeout(() => {
					// 日产量/日工资/月产量/月工资数据
					let series = [{
						name: this.$t('homepage.OutputWage.dayProduct'),
						data: [this.outputWageFormData.todayYield]
					}, {
						name: this.$t('homepage.OutputWage.monthProduct'),
						data: [this.outputWageFormData.monthYield]
					}, {
						name: this.$t('homepage.OutputWage.dayWage'),
						data: [this.outputWageFormData.todaySalary]
					}, {
						name: this.$t('homepage.OutputWage.monthWage'),
						data: [this.outputWageFormData.mouthSalary]
					}]
					let res = {
						categories: [this.date],
						series: series
					};
					if (type == 1) {
						this.drawCharts('column', res);
					} else {
						this.updateCDSec('column', res)
					}
					
				}, 500);
			},
			drawCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "column",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					categories: data.categories,
					series: data.series,
					animation: true,
					background: "#FFFFFF",
					xAxis: {
						disableGrid: true,
						scrollShow: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group"
						}
					}
				});
			},
			tap(e) {
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			},
			// 更新图表数据
			updateCDFir() {
				getTodayYeild().then((res) => {
					this.outputWageFormData = res.data
					this.$nextTick(() => {
						this.getServerData(2);
					})
				})
			},
			updateCDSec(id, data) {
				uChartsInstance[id].updateData({
				    categories: data.categories,
				    series: data.series,
				});
			},
			// 个人中心单元格系统点击事件
			clickSystemHandler(e) {
				if (e.index == 0) {
					uni.showModal({
						title: this.$t('my.set.exit'),
						content: this.$t('my.set.makeSureExit'),
						success: function(res) {
							if (res.confirm) {
								logout().then((res) => {
									uni.reLaunch({
										url: "../Index/index"
									})
									uni.removeStorage({
										key: 'token',
									})
									let arr = uni.getStorageSync("procedureData")
									for (var i = 0; i < arr.length; i++) {
										arr[i].switch = false
									}
									uni.setStorageSync("procedureData", arr)
								}).catch((res) => {
									uni.showToast({
										title: res.message,
										icon: "none",
										duration: 3000
									})
								});
							}
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width:100%;
		height: 100%;

		.container_head {
			background-image: url(../../static/assets/homepage/index/head.png);
			background-size: 100%;
			padding: 100rpx 30rpx 110rpx 30rpx;
			color: #ffffff;

			.head {
				display: flex;

				.title {
					text-align: left;
					font-size: 50rpx;
					font-weight: bolder;
				}

				.imgs {
					display: flex;
					margin-left: auto;

					.img {
						padding: 10rpx;
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.name {
				font-size: 36rpx;
				display: flex;
				align-items: center; //上下对齐
				justify-content: space-between; //两端对齐

				.name_text {
					opacity: 0.8 !important;
					font-size: 32rpx !important;
				}
			}
		}

		.container_drawer {
			padding-top: 100rpx;
			margin: 0 auto;
		}

		.container_drawer_border {
			border-bottom: 1rpx solid #f5f5f5;
		}

		.container_drawer_version {
			color: #999999;
			font-size: 26rpx;
			bottom: 50rpx;
			position: fixed;
			width: 100%;

			.span {
				text-align: center;
			}
		}

		.container_grid {
			background-color: #fff;
			margin: -60rpx 20rpx 20rpx 20rpx;
			border-radius: 10rpx;
			width: calc(100% - 60rpx);
			min-height: 100rpx;
			padding: 10rpx 10rpx;
		}

		.container_grid_box {
			padding: 20rpx;
			text-align: center;
		}

		.container_grid_box_img {
			width: 35px;
			height: 35px
		}

		.container_grid_box_text {
			text-indent: 10rpx;
			margin-top: 10rpx;
			font-size: 32rpx;
			font-weight: 600;
		}

		.container_grid_box_badge {
			position: absolute;
			top: 5px;
			right: 15px;
		}

		.container_salary {
			background-color: #fff;
			margin: 20rpx;
			border-radius: 10rpx;
			width: calc(100% - 80rpx);
			min-height: 100rpx;
			padding: 20rpx;
		}

		.title {
			display: flex;
			justify-content: space-between;
			margin: 10rpx 0;

			.title-span {
				font-size: 16px;
				font-weight: bolder;
			}

			.title-date {
				font-size: 12px;
				color: #999999;
			}
		}
		
		.charts-title {
			align-items: center;
			
			.update-can-data {
				font-size: 28rpx;
				color: #999999;
				opacity: .8;
			}
		}

		.content {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;

			.content-list {
				box-sizing: border-box;
				background-color: #f5f5f5;
				flex: 0 0 calc(50% - 20rpx);
				margin: 10rpx;
				height: 150rpx;
				border-radius: 10rpx;
				display: flex;

				.img {
					margin: auto 15rpx auto 30rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.text {
					margin: auto 30rpx auto 15rpx;

					span {
						font-weight: bolder;
					}

					.data {
						font-weight: bolder;
						text-align: center;
						padding-top: 15rpx;

						.unit {
							font-weight: 400 !important;
							font-size: 28rpx;
							color: #999999;
							padding-left: 5rpx;
						}
					}
				}
			}
		}

		.charts {
			width: 700rpx;
			height: 500rpx;
		}
	}
</style>